<template>
  <div class="addarticle">
    <a-card :title="isadd ? '新增文章' : '修改文章'" style="width: 100%">
      <div>
        <div class="display">
          <span class="title">文章分类</span>
          <a-select style="width: 250px" v-model="form.class_id">
            <a-select-option v-for="(item, index) in balist" :key="index" :value="item.id">
              {{ item.class_name }}
            </a-select-option>
          </a-select>
          <span class="title" style="margin-left:15px">文章名称</span>
          <a-input placeholder="请输入文章名称" v-model="form.title" allowClear style="width:350px" />
        </div>
        <div class="display">
          <span class="title">文章内容</span>
          <editor-bar v-model="form.content" :value="form.content" @change="getEditor" id="weditor"></editor-bar>
        </div>
        <a-button style="margin-left:95px" type="primary" @click="dochange">提 交</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import EditorBar from '@/components/Editor/WangEditor'
import { getClassList, addArticle, updateArticle } from '@/api/article'
export default {
  name: 'Addarticle',
  components: {
    EditorBar
  },
  data () {
    return {
      isadd: true,
      balist: [],
      form: {
        title: '',
        content: '',
        class_id: ''
      }
    }
  },

  computed: {},
  created () {
    if (this.$route.query.item) {
      this.isadd = false
      console.log('query', JSON.parse(this.$route.query.item))
      console.log(this.form.content)
      setTimeout(() => {
        this.form = JSON.parse(this.$route.query.item)
        this.form.article_id = this.form.id
      }, 300)
    }
    this.getClassList()
  },
  mounted () {},
  methods: {
    dochange () {
    //   if (!this.form.pid) {
    //     this.form.pid = 0
    //   }
      console.log('this.form', this.form)
      if (this.isadd === true) {
        addArticle(this.form)
          .then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.$router.push({
                path: '/admin/article/content'
              })
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        updateArticle(this.form)
          .then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.$router.push({
                path: '/admin/article/content'
              })
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 获取富文本内容
    getEditor (value) {
      console.log(value)
      this.form.content = value
    },
    // 获取嵌套的分类列表
    getClassList () {
      getClassList()
        .then(res => {
          if (res.code === 200) {
            // console.log('嵌套返回', res)
            this.balist = res.data
            // for (let i = 0; i < res.data.length; i++) {
            //   // if (res.data[i].data.length > 0) {
            //     this.balist.push(...res.data[i])
            //   // }
            // }
            // console.log(this.balist)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .title {
    display: inline-block;
    width: 70px;
    height: 32px;
    line-height: 32px;
    margin: 0px 8px;
  }
}
</style>
